<template>
    <div>
        <el-alert
            title="白名单内的设备不受快速配置中 热更新 和 登录 的开关限制, 方便开发人员进行调试."
            type="info"
            :closable="false"
            show-icon>
        </el-alert>
        <el-divider></el-divider>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" >
                <el-form-item label="UUID">
                    <el-input class="filter-item" clearable v-model="search.uuid" placeholder="UUID" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-col :xl="12">
            <el-table
                v-loading.body="loading"
                ref="multipleTable"
                stripe
                border
                :data="tableData"
                tooltip-effect="dark"
                class="text-center"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"/>
                <el-table-column label="设备码" prop="uuid"/>
                <el-table-column label="备注" prop="remark"/>
                <el-table-column label="创建时间" prop="created_at" width="140"/>
                <el-table-column label="操 作" width="150px">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            @click="edit(scope.row)">
                            编辑
                        </el-button>
                        <destroy-confirm
                            route="uuidWhiteList/Destroy"
                            :primary="scope.row.id"
                            @success="handleSearch">
                        </destroy-confirm>
                    </template>
                </el-table-column>
            </el-table>

            <div class="mt-10 pull-left">
                <destroy-multiple
                    route="uuidWhiteList/DestroyMultiple"
                    :selected="selected"
                    @success="handleSearch">
                    <el-button type="danger"  plain>删除选中</el-button>
                </destroy-multiple>
            </div>
            <el-pagination
                class="pull-right"
                background
                :current-page.sync="pageNo"
                :page-sizes="pageOptions.pageSizesList"
                :page-size="pageSize"
                :layout="pageOptions.layout"
                :total="totalDataNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-col>

        <el-dialog
            :title="form.data && form.data.id ? '编辑' : '添加'"
            :visible.sync="form.show"
            width="30%"
            :append-to-body="true"
            center>
            <dialog-form
                :data="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

    </div>
</template>

<script>
    import dialogForm from './form'
    export default {
        components: {
            dialogForm,
        },
        data() {
            return {
                search: {
                    uuid: '',
                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                pageOptions: this.$store.state.backend.pageOptions,
                totalDataNumber: 0,
                options: this.$store.state.appSource.options,
                form: {
                    data: {},
                    show: false,
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val;
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.$store.dispatch('uuidWhiteList/Lists', filter).then(res => {
                    this.tableData = res.data.data;
                    this.totalDataNumber = res.data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            create() {
                this.form.data = {};
                this.form.show = true;
            },
            edit(row) {
                this.form.data = row;
                this.form.show = true;
            },
            onFormSubmit() {
                this.form.show = false;
                this.handleSearch();
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style scoped>

</style>

